<template>
	<page-meta :page-style="'overflow:' + (show ? 'hidden':'visible' ) "></page-meta>
	<!-- <page-meta :page-style="'overflow:' + (shareShare ? 'hidden':'visible' ) "></page-meta> -->
	<view class="user-detail-main">
		<view class="user-main-info-view"
			:style="{ backgroundImage: 'url(' + bgImageUrl + ')', backgroundSize: 'cover' }" @click="previewAvatarImage(bgImageUrl)">
			<view class="mask">
				<view class="return-dots">
					<view class="return-view" @click.stop="returnPreview">
						<uni-icons type="arrow-left" size="28" color="#fff"></uni-icons>
					</view>
					<view class="dots" @click.stop="openSharePopup">
						<uni-icons type="more-filled" size="28" color="#fff"></uni-icons>
					</view>
				</view>
				<view class="avatar-user-ip">
					<view class="avatar">
						<image :src="userAvatar" mode="aspectFill" @click.stop="previewAvatarImage(userAvatar)"></image>
					</view>
					<view class="user-info-right">
						<view class="userName">
							{{userName}}
						</view>
						<view class="register-day-ip">
							<view class="register-day">
								{{registerDay}}
							</view>
							<view class="register-ip-text">
								<view class="register-ip">
									IP属地：{{registerIp}}
								</view>
								<view class="register-ip-icon">
									<image src="@/static/icons/info.png" mode="aspectFill"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="signature">
					{{signature}}
				</view>
				<view class="tags">
					<view class="tags-item" v-for="(item,index) in tags" :key="index">
						{{item.tagName}}
					</view>
				</view>
				<view class="top-bottom">
					<view class="guanzhu-fans-collectnum">
						<view class="guanzhu" @click.stop="toAttention(0)">
							<view class="guanzhu-num">
								{{guanzhuNum}}
							</view>
							<view class="guanzhu-text">
								关注
							</view>
						</view>
						<view class="fans" @click.stop="toAttention(1)">
							<view class="fans-num">
								{{fansNum}}
							</view>
							<view class="fans-text">
								粉丝
							</view>
						</view>
						<view class="zan-collect" @click.stop="popupLikeAndCollect">
							<view class="zan-num">
								{{zanNum}}
							</view>
							<view class="zan-text">
								获赞与收藏
							</view>
						</view>
					</view>
					<view class="guanzhu-bt-message">
						<view class="guanzhu-btn" @click.stop="clickAttention">
							<button>{{guanzhuText}}</button>
						</view>
						<view class="message" @click.stop="goChatPage">
							<uni-icons type="chat" size="20" color="#fff"></uni-icons>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 下面的笔记和收藏列表 -->
		<view class="note-collect-list">
			<view class="list-top">
				<view class="note-collect-select">
					<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text"
						activeColor="#66596b"></uni-segmented-control>
				</view>
				<view class="search-area">
					<view v-if="isClickSearch" class="search-input"
						:class="{ 'fade-in': isClickSearch, 'fade-out':!isClickSearch }">
						<input type="text" v-model="searchValue" :placeholder="placeholderText" @blur="inputHandler"
							@confirm="clickSearchIcon" />
					</view>
					<view class="search-icon" @click="clickSearchIcon">
						<uni-icons type="search" size="25"></uni-icons>
					</view>
				</view>
			</view>
			<view class="content">
				<view v-show="current === 0">
					<NoteShowList :notes="newNotes"></NoteShowList>
				</view>
				<view v-show="current === 1">
					<UserCollectVue :notes="newCollectNotes" :goods="newCollectGoods" @currentClick="handleCurrent">
					</UserCollectVue>
				</view>
			</view>
		</view>

		<!-- 弹出获赞与收藏内容 -->
		<uni-popup ref="LikeAndCollectPopup" type="center" @change="change" sh>
			<view class="like-and-collect-main">
				<view class="like-and-collect-title">
					获赞与收藏
				</view>
				<divider-line :width="100" :color="'#dedede'"></divider-line>
				<view class="like-and-collect-content">
					<view class="note-num">
						<view class="note-image">
							<image src="@/static/icons/note.png" mode="aspectFill"></image>
						</view>
						<view class="note-text">
							{{likeAndCollect[0].text}}
						</view>
						<view class="note-num-value">
							{{likeAndCollect[0].num}}
						</view>
					</view>
					<view class="note-num">
						<view class="note-image1">
							<uni-icons type="heart-filled" size="20" color="#fff"></uni-icons>
						</view>
						<view class="note-text">
							{{likeAndCollect[1].text}}
						</view>
						<view class="note-num-value">
							{{likeAndCollect[1].num}}
						</view>
					</view>
					<view class="note-num">
						<view class="note-image2">
							<uni-icons type="star-filled" size="20" color="#fff"></uni-icons>
						</view>
						<view class="note-text">
							{{likeAndCollect[2].text}}
						</view>
						<view class="note-num-value">
							{{likeAndCollect[2].num}}
						</view>
					</view>
				</view>
				<view class="i-know-view" @click="clickIknow">
					<button type="default">我知道了</button>
				</view>
			</view>
		</uni-popup>

		<!-- 分享弹出层 -->
		<uni-popup ref="sharePopup" type="bottom" @change="change">
			<view class="share-popup-main">
				<view class="share-popup-title">
					分享至
				</view>
				<view class="friends-list">
					<view class="friend-item" v-for="(item,index) in friendsList" :key="index"
						@click="tofriendChatPage(item.userAid)">
						<view class="friend-avatar">
							<image :src="item.userAvatar" mode="aspectFill"></image>
						</view>
						<view class="friend-name">
							{{item.userName}}
						</view>
					</view>
				</view>
				<view class="share-outside">
					<view class="private-message-friends" v-for="(item,index) in outShareData" :key="index"
						@click="clickOutShare(item)">
						<view class="private-message-friends-icon">
							<image :src="item.outShareIcon" mode="aspectFill"></image>
						</view>
						<view class="private-message-friends-text">
							{{item.outShareName}}
						</view>
					</view>
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import mitter from '@/common/mitt/eventBus.js'
	import NoteShowList from '@/components/common-components/NoteShowList.vue';
	import UserCollectVue from '@/components/common-components/UserCollect.vue';
	import DividerLine from '../../../components/common-components/DividerLine.vue';
	import { getUserDetails } from '@/request/user';
	export default {
		components: {
			NoteShowList,
			UserCollectVue,
			DividerLine
		},
		data() {
			return {
				show: false,
				isClickSearch: false,
				placeholderText: '搜索ta的笔记',
				searchValue: '',
				newNotes: [],
				currentLoginUserAid: uni.getStorageSync('userAid'), // 当前登录的用户的aid
				notes: [{
						noteAid: 1,
						isVedio: false,
						url: 'https://img2.baidu.com/it/u=868566590,1876533926&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1139',
						title: '今天很忧郁',
						releaseTime: '2022年12月20日 23:23:04',
						isLike: false, // 是否点赞
						likeCount: 0,
						commentCount: 0,
					},
					{
						noteAid: 2,
						isVedio: true,
						url: 'https://fzg-jy.oss-cn-hangzhou.aliyuncs.com/jyapp/home/yufen/camping/video/%E5%85%85%E6%B0%94%E6%B2%99%E5%8F%915.mp4',
						videoCover: 'https://img0.baidu.com/it/u=195508433,693019668&fm=253&fmt=auto&app=120&f=JPEG?w=750&h=500',
						title: '家人们找到一个露营圣地',
						releaseTime: '2023年11月20日 23:08:04',
						isLike: false, // 是否点赞
						likeCount: 235,
						commentCount: 27,
					},
					{
						noteAid: 3,
						isVedio: true,
						url: 'https://fzg-jy.oss-cn-hangzhou.aliyuncs.com/jyapp/home/yufen/notes/范占国2024-12-07卷尺灯3.mp4',
						videoCover: 'http://t14.baidu.com/it/u=3871136798,171938325&fm=224&app=112&f=JPEG?w=500&h=500',
						title: '卷尺灯',
						releaseTime: '2024年8月20日 23:08:04',
						isLike: true, // 是否点赞
						likeCount: 345,
						commentCount: 90,
					},
					{
						noteAid: 4,
						isVedio: false,
						url: 'https://img0.baidu.com/it/u=3577356751,2936750237&fm=253&fmt=auto&app=120&f=JPEG?w=750&h=500',
						title: 'Sephoria 丝芙兰美妆节',
						releaseTime: '2024年10月20日 23:08:04',
						isLike: true, // 是否点赞
						likeCount: 56,
						commentCount: 0,
					},
					{
						noteAid: 5,
						isVedio: false,
						url: 'https://img0.baidu.com/it/u=364532874,2598986379&fm=253&fmt=auto&app=138&f=JPEG?w=607&h=405',
						title: '巷口的煎饼果子香',
						releaseTime: '2024年12月08日 08:56:00',
						isLike: true, // 是否点赞
						likeCount: 23,
						commentCount: 1,
					}
				],
				userCollectNotes: [{
						noteAid: 1,
						isVedio: false,
						url: 'https://img2.baidu.com/it/u=868566590,1876533926&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1139',
						title: '今天很忧郁',
						authorAvatar: 'https://img2.baidu.com/it/u=3768926381,2413212543&fm=253&fmt=auto&app=138&f=JPEG?w=475&h=475',
						authorUserName: '小王子',
						isLike: false, // 是否点赞
						likeCount: 0,
					},
					{
						noteAid: 2,
						isVedio: true,
						url: 'https://fzg-jy.oss-cn-hangzhou.aliyuncs.com/jyapp/home/yufen/camping/video/%E5%85%85%E6%B0%94%E6%B2%99%E5%8F%915.mp4',
						videoCover: 'https://img0.baidu.com/it/u=195508433,693019668&fm=253&fmt=auto&app=120&f=JPEG?w=750&h=500',
						title: '家人们找到一个露营圣地',
						authorAvatar: 'https://img2.baidu.com/it/u=4098516808,3262658970&fm=253&fmt=auto&app=138&f=JPEG?w=380&h=380',
						authorUserName: '甜心草莓',
						isLike: true, // 是否点赞
						likeCount: 235,
					}
				],
				userCollectGoods: [{
					goodsAid: 1,
					goodImg: 'https://pic.rmb.bdstatic.com/bjh/down/df5f0542d63eea8657ac42f05b50f5db.jpeg',
					goodsName: '帐篷',
					goodsPrice: '￥233'
				}],
				newCollectGoods: [],
				newCollectNotes: [],
				items: ['笔记', '收藏'],
				current: 0,
				guanzhuText: '关注',
				zanNum: 215,
				fansNum: 10,
				guanzhuNum: 70,
				bgImageUrl: 'https://img2.baidu.com/it/u=3722321417,3486199951&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
				userAvatar: 'https://img2.baidu.com/it/u=4101310977,348998276&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800',
				userName: '疆屿用户48731y',
				userAid: 0,
				registerDay: '23天', // 注册天数
				registerIp: '浙江', // IP归属地
				signature: '入目无他人，四下皆是你。',
				tags: [{
						tagId: 1,
						tagName: '24岁',
					},
					{
						tagId: 2,
						tagName: '浙江金华',
					}
				],
				collectCurrentIndex: 0, // 收藏下面的（笔记，商品）索引
				friendsList: [{
						userAid: 1,
						userName: '小猫爱吃鱼1',
						userAvatar: 'https://img1.baidu.com/it/u=3460486667,3815091601&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800',
					},
					{
						userAid: 2,
						userName: '小猫爱吃鱼2',
						userAvatar: 'https://img1.baidu.com/it/u=3460486667,3815091601&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800',
					},
					{
						userAid: 3,
						userName: '小猫爱吃鱼3',
						userAvatar: 'https://img1.baidu.com/it/u=3460486667,3815091601&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800',
					},
					{
						userAid: 4,
						userName: '小猫爱吃鱼4',
						userAvatar: 'https://img1.baidu.com/it/u=3460486667,3815091601&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800',
					},
					{
						userAid: 5,
						userName: '小猫爱吃鱼5',
						userAvatar: 'https://img1.baidu.com/it/u=3460486667,3815091601&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800',
					},
					{
						userAid: 6,
						userName: '小猫爱吃鱼6',
						userAvatar: 'https://img1.baidu.com/it/u=3460486667,3815091601&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800',
					},
					{
						userAid: 7,
						userName: '小猫爱吃鱼7',
						userAvatar: 'https://img1.baidu.com/it/u=3460486667,3815091601&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800',
					},
					{
						userAid: 8,
						userName: '小猫爱吃鱼8',
						userAvatar: 'https://img1.baidu.com/it/u=3460486667,3815091601&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800',
					},
					{
						userAid: 9,
						userName: '小猫爱吃鱼9',
						userAvatar: 'https://img1.baidu.com/it/u=3460486667,3815091601&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800',
					},
				], // ta的好友列表
				outShareData: [{
						outShare: 1,
						outShareName: '私信好友',
						outShareIcon: '../../../static/icons/private-message-friends.png',
					},
					{
						outShare: 2,
						outShareName: '微信好友',
						outShareIcon: '../../../static/icons/wechat-friend.png',
					},
					{
						outShare: 3,
						outShareName: '微信朋友圈',
						outShareIcon: '../../../static/icons/wechat-moments.png',
					}
				],

				// 获赞与收藏
				likeAndCollect: [{
						text: '当前发布笔记数',
						num: 234,
					},
					{
						text: '当前获得点赞数',
						num: "23.9万",
					},
					{
						text: '当前获得收藏数',
						num: '2.7万',
					},
				],

			};
		},
		onLoad(options) {
			// 获取用户主页的全部信息
			this.getUserDetailosFunc(options);
		},
		methods: {
			
			// 获取用户主页的全部信息
			getUserDetailosFunc(options){
				// console.log(options);
				const params = {
					userAid: options.aid
				}
				getUserDetails(params).then(res=>{
					// console.log(res);
					this.friendsList = res.data.data.friendsList;
					this.userAid = params.userAid;
					this.userName = res.data.data.userName;
					this.bgImageUrl = res.data.data.bgImageUrl;
					this.userAvatar = res.data.data.userAvatar;
					this.registerDay = res.data.data.registerDay;
					this.registerIp = res.data.data.registerIp;
					this.signature = res.data.data.signature;
					this.tags = res.data.data.tags;
					this.guanzhuNum = res.data.data.guanzhuNum;
					this.fansNum = res.data.data.fansNum;
					this.zanNum = res.data.data.zanNum;
					this.likeAndCollect = res.data.data.likeAndCollect;
					this.guanzhuText = res.data.data.guanzhuText;
					this.notes = res.data.data.notes;
					this.userCollectNotes = res.data.data.userCollectNotes;
					this.userCollectGoods = res.data.data.userCollectGoods;
					this.newNotes = this.notes;
					this.newCollectGoods = this.userCollectGoods;
					this.newCollectNotes = this.userCollectNotes;
				})
			},
			
			returnPreview() {
				uni.navigateBack()
			},

			previewAvatarImage(image) {
				uni.previewImage({
					urls: [image], // 将头像图片的URL放入数组中，因为previewImage的urls参数要求是一个图片URL数组
					current: image, // 设置当前显示的图片为头像图片本身
				});
			},

			onClickItem(e) {
				this.searchFunc();
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex;
				}
				if (this.current === 0) {
					this.placeholderText = "搜索ta的笔记"
				} else {
					this.placeholderText = "搜索ta收藏的笔记"
				}
			},

			clickSearchIcon() {
				this.isClickSearch = !this.isClickSearch;
				this.searchFunc();
			},

			// 通过关键字搜索
			searchFunc() {
				if (this.searchValue.trim() === '') {
					this.newCollectGoods = this.userCollectGoods;
					this.newCollectNotes = this.userCollectNotes;
					this.newNotes = this.notes;
					// 触发自定义事件，传递更新后的数据给子组件
					const data = {
						notes: this.newCollectNotes,
						goods: this.newCollectGoods,
					}
					mitter.emit('searchNoteOrCollectResult', data);
					mitter.emit('searchUserNoteResult', this.newNotes)
				} else {
					if (this.current === 0) {
						// 搜索的是笔记
						this.newNotes = [];
						this.notes.forEach(item => {
							if (item.title.includes(this.searchValue)) {
								this.newNotes.push(item)
							}
						})
						mitter.emit('searchUserNoteResult', this.newNotes)
					} else {
						// 搜索的是他的收藏
						if (this.collectCurrentIndex === 0) {
							// 搜索的是收藏下面的笔记
							this.newCollectNotes = [];
							this.userCollectNotes.forEach(item => {
								if (item.title.includes(this.searchValue) || item.authorUserName.includes(this
										.searchValue)) {
									this.newCollectNotes.push(item)
								}
							})
							console.log(this.newCollectNotes);
						} else {
							// 搜索的是收藏下面的商品
							this.newCollectGoods = [];
							this.userCollectGoods.forEach(item => {
								if (item.goodsName.includes(this.searchValue)) {
									this.newCollectGoods.push(item)
								}
							})
						}
						// 触发自定义事件，传递更新后的数据给子组件
						const data = {
							notes: this.newCollectNotes,
							goods: this.newCollectGoods
						}
						mitter.emit('searchNoteOrCollectResult', data);
					}
				}

			},

			inputHandler() {
				this.isClickSearch = !this.isClickSearch;
				this.searchFunc();
			},

			handleCurrent(e) {
				this.collectCurrentIndex = e;
				if (this.current === 1) {
					if (e === 0) {
						this.placeholderText = "搜索ta收藏的笔记"
					} else {
						this.placeholderText = "搜索ta收藏的商品"
					}
				}
			},

			openSharePopup() {
				this.show = true;
				this.$refs.sharePopup.open();
			},

			tofriendChatPage(userAid) {
				console.log(userAid);
				// 直接给对方发送一条消息（跳转页面的消息：带图文的）

				// 然后跳转到聊天页面
				uni.showToast({
					title: '分享成功！',
					icon: 'none'
				})
				setTimeout(() => {
					uni.navigateTo({
						url: `/pages/friendsChat/chatPage/chatRoomPage?userAid=${userAid}`
					})
				}, 1000)
			},

			goChatPage() {
				uni.navigateTo({
					url: `/pages/friendsChat/chatPage/chatRoomPage?userAid=${this.userAid}`
				})
			},

			clickOutShare(item) {
				console.log(item);
				if (item.outShare === 1) {
					// 去私信好友
					uni.navigateTo({
						url: '/pages/tabBar/template/friend/privateFriendList'
					})
				} else if (item.outShare === 2) {
					// 分享给微信好友
					// 引入微信分享SDK（此处假设已经正确引入，实际要根据UniApp官方文档配置好相关依赖）
					// 以下是基本的分享到微信好友的代码逻辑示例
					uni.share({
						provider: "weixin",
						scene: "WXSceneSession", // 分享到微信会话（好友）场景
						type: 0, // 分享类型，0表示分享链接等，可根据实际需求调整为分享图片、小程序等其他类型
						href: window.location.href, // 分享的链接，这里示例使用当前页面的链接，可替换为你想分享的具体链接
						title: this.userName, // 分享的标题，可自定义
						summary: "给你分享一个小伙伴！开来看看吧！", // 分享的摘要描述，可自定义
						imageUrl: this.userAvatar, // 分享的图片链接，若有需要分享的图片可填写对应的图片地址
						success: function(res) {
							console.log("分享给微信好友成功", res);
						},
						fail: function(err) {
							console.log("分享给微信好友失败", err);
						}
					});
				} else if (item.outShare === 3) {
					// 分享到微信朋友圈
					// 同样需引入微信分享SDK并配置好相关参数
					uni.share({
						provider: "weixin",
						scene: "WXSceneTimeline", // 分享到微信朋友圈场景
						type: 0, // 分享类型，0表示分享链接等，可根据实际需求调整为分享图片、小程序等其他类型
						href: window.location.href, // 分享的链接，这里示例使用当前页面的链接，可替换为你想分享的具体链接
						title: this.userName, // 分享的标题，可自定义
						summary: "给你分享一个小伙伴！开来看看吧！", // 分享的摘要描述，可自定义
						imageUrl: this.userAvatar, // 分享的图片链接，若有需要分享的图片可填写对应的图片地址
						success: function(res) {
							console.log("分享到微信朋友圈成功", res);
						},
						fail: function(err) {
							console.log("分享到微信朋友圈失败", err);
						}
					});
				}
			},

			clickAttention() {
				// 回关还是已关注
				if (this.guanzhuText === "回关") {
					this.guanzhuText = "已关注"
				} else {
					this.guanzhuText = "回关"
				}
			},

			// 去他的关注页面
			toAttention(index) {
				// 先判断对方是否让你看他的关注页面
				uni.navigateTo({
					url: `/pages/tabBar/template/fans/fansAndFollowListPage?userAid=${this.userAid}&&menuName=${index===0 ? '关注' : '粉丝'}`
				})
			},

			popupLikeAndCollect() {
				this.show = true;
				this.$refs.LikeAndCollectPopup.open()
			},

			change(e) {
				this.show = e.show
			},

			clickIknow() {
				console.log(this.show);
				this.$refs.LikeAndCollectPopup.close()
				this.show = false;
			}

		},
	};
</script>

<style lang="scss" scoped>
	.user-detail-main {
		width: 100%;
		display: flex; // 添加，明确设置为flex布局，方便统一管理子元素布局
		flex-direction: column; // 按列排列子元素

		.user-main-info-view {
			width: 100%;
			height: auto;

			.mask {
				width: 100%;
				background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%); // 修改这里，设置从上往下的线性渐变，顶部透明，底部半透明黑色
				color: #fff;
				display: flex;
				flex-direction: column;
				flex-grow: 1; // 新增，让其可以占用剩余空间，自动撑高

				// justify-content: space-between;

				.return-dots {
					margin-top: 60rpx;
					width: 90%;
					margin-left: auto;
					margin-right: auto;
					display: flex;
					flex-direction: row;
					justify-content: space-between;

				}

				.avatar-user-ip {
					margin-top: 50rpx;
					width: 90%;
					margin-left: auto;
					margin-right: auto;
					display: flex;
					flex-direction: row;

					.avatar {
						image {
							width: 160rpx;
							height: 160rpx;
							border-radius: 50%;
							border: 1rpx solid #fff;
						}
					}

					.user-info-right {
						margin-left: 30rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						// background-color: #55aa7f;

						.userName {
							font-size: 40rpx;
							font-weight: bold;
						}

						.register-day-ip {
							margin-bottom: 20rpx;
							color: #f5f5f5;
							font-size: 25rpx;

							.register-ip-text {
								display: flex;
								align-items: center;

								.register-ip-icon {

									margin-left: 8rpx;

									image {
										width: 20rpx;
										height: 20rpx;
									}
								}
							}
						}
					}
				}

				.signature {
					margin-top: 20rpx;
					width: 90%;
					margin-left: auto;
					margin-right: auto;
					font-size: 26rpx;
				}

				.tags {
					margin-top: 20rpx;
					width: 90%;
					margin-left: auto;
					margin-right: auto;
					display: flex;

					.tags-item {
						padding-top: 10rpx;
						padding-bottom: 10rpx;
						padding-left: 15rpx;
						padding-right: 15rpx;
						border-radius: 25rpx;
						border: 1rpx solid #fff;
						margin-right: 10rpx;
						font-size: 20rpx;
					}
				}

				.top-bottom {
					margin-top: 60rpx;
					margin-bottom: 30rpx;
					width: 90%;
					margin-left: auto;
					margin-right: auto;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					margin-bottom: 100rpx;

					.guanzhu-fans-collectnum {
						display: flex;

						.guanzhu {
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;

							.guanzhu-num {
								font-size: 32rpx;
							}

							.guanzhu-text {
								font-size: 26rpx;
							}
						}

						.fans {
							margin-left: 50rpx;
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;

							.fans-num {
								font-size: 32rpx;
							}

							.fans-text {
								font-size: 26rpx;
							}
						}

						.zan-collect {
							margin-left: 50rpx;
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;

							.zan-num {
								font-size: 32rpx;
							}

							.zan-text {
								font-size: 26rpx;
							}
						}
					}

					.guanzhu-bt-message {
						display: flex;
						flex-direction: row;
						justify-content: center;
						align-items: center;

						.guanzhu-btn {
							button {
								width: 170rpx;
								height: 60rpx;
								color: #fff;
								border: 1px solid #fff;
								background-color: #66596b;
								border-radius: 30rpx;
								display: flex;
								align-items: center;
								justify-content: center;
								font-size: 24rpx;
								letter-spacing: 4rpx;
							}
						}

						.message {
							padding: 10rpx;
							border: 1px solid #fff;
							margin-left: 20rpx;
							border-radius: 30rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							width: 60rpx;
							background-color: #66596b;
						}
					}
				}
			}
		}

		.note-collect-list {
			width: 100%;
			height: 1000rpx;
			margin-top: -50rpx;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
			background-color: #ffffff;
			box-shadow: 0px -10rpx 20rpx rgba(255, 255, 255, 0.8); // 添加边框阴影，水平偏移量为0，垂直偏移量为 -5px（向上阴影），模糊半径为10px，颜色为半透明黑色，你可根据需求调整参数值

			.list-top {
				width: 90%;
				display: flex;
				margin-left: auto;
				margin-right: auto;
				margin-top: 20rpx;
				flex-direction: row;
				justify-content: space-between;

				.note-collect-select {
					width: 300rpx;

					uni-segmented-control {
						font-size: 50rpx; // 设置字体大小，可按需调整数值
					}
				}

				.search-area {
					display: flex;
					justify-content: space-between;
					margin-top: 20rpx;

					.search-input {
						visibility: hidden;
						transition: opacity 0.5s ease-in-out; // 过渡时长设置为0.3秒，缓入缓出效果，可按需调整

						input {
							width: 270rpx;
							border: 1rpx solid #888888;
							border-radius: 25rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							padding: 10rpx;
							padding-left: 25rpx;
							font-size: 20rpx;
							background-color: #f0f0f0; // 这里将背景色设置到input元素自身，可按需调整颜色值
						}
					}

					.fade-in {
						visibility: visible;
						/* 显示时设置为可见 */
						opacity: 1;
					}

					.fade-out {
						visibility: visible;
						opacity: 0;
					}

					.search-icon {
						margin-left: 20rpx;
					}
				}

			}

			.content {
				// margin-top: 20rpx;
				width: 90vw;
				margin-left: auto;
				margin-right: auto;
			}
		}

		.share-popup-main {
			height: 500rpx;
			background-color: #fff;
			border-radius: 20rpx 20rpx 0 0;

			.share-popup-title {
				padding-top: 30rpx;
				text-align: center;
				letter-spacing: 3rpx;
			}

			/* 隐藏水平滚动条（仅WebKit内核浏览器有效） */
			.friends-list::-webkit-scrollbar {
				display: none;
			}

			.friends-list {
				margin-left: 30rpx;
				margin-top: 30rpx;
				display: flex;
				overflow-x: scroll;
				/* 让内部文本等内容不换行，便于测试滚动效果 */
				white-space: nowrap;
				margin-right: 30rpx;

				.friend-item {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					margin-right: 40rpx;
					scrollbar-width: none;

					.friend-avatar {
						image {
							width: 120rpx;
							height: 120rpx;
							border-radius: 50%;
						}
					}

					.friend-name {
						margin-top: 10rpx;
						font-size: 25rpx;
					}
				}
			}

			/* 隐藏水平滚动条（仅WebKit内核浏览器有效） */
			.share-outside::-webkit-scrollbar {
				display: none;
			}

			.share-outside {
				margin-left: 30rpx;
				margin-top: 30rpx;
				display: flex;
				overflow-x: scroll;
				/* 让内部文本等内容不换行，便于测试滚动效果 */
				white-space: nowrap;
				margin-right: 30rpx;

				.private-message-friends {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					margin-right: 40rpx;
					scrollbar-width: none;

					.private-message-friends-icon {
						image {
							width: 120rpx;
							height: 120rpx;
						}
					}

					.private-message-friends-text {
						margin-top: 10rpx;
						font-size: 25rpx;
					}
				}
			}
		}

		.like-and-collect-main {
			width: 500rpx;
			height: 700rpx;
			background-color: #ffffff;
			border-radius: 30rpx;
			box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.6);

			.like-and-collect-title {
				width: 100%;
				text-align: center;
				padding-top: 40rpx;
				font-size: 40rpx;
			}

			.like-and-collect-content {
				width: 90%;
				height: 50%;
				margin-left: auto;
				margin-right: auto;
				display: flex;
				flex-direction: column;
				justify-content: space-around;

				.note-num {
					display: flex;
					justify-content: space-evenly;
					align-items: center;

					.note-image {
						width: 50rpx;
						height: 50rpx;
						border-radius: 50%;
						background-color: #e3cde2;
						display: flex;
						align-items: center;
						justify-content: center;

						image {
							width: 30rpx;
							height: 30rpx;
							margin-left: 5rpx;
						}
					}

					.note-image1 {
						width: 50rpx;
						height: 50rpx;
						border-radius: 50%;
						background-color: red;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.note-image2 {
						width: 50rpx;
						height: 50rpx;
						border-radius: 50%;
						background-color: #aaaaff;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.note-text {
						margin-left: -20rpx;
						font-size: 30rpx;
						color: #888888;
					}

					.note-num-value {
						font-size: 30rpx;
					}
				}
			}

			.i-know-view {
				margin-top: 30rpx;
				width: 80%;
				margin-left: auto;
				margin-right: auto;

				button {
					color: #fff;
					font-size: 30rpx;
					letter-spacing: 2rpx;
					background-color: #66596b;
					border-radius: 50rpx;
				}
			}
		}
	}
</style>